<template>
    <div class="page-wrap" v-loading="loading">
        <div class="page-cont">
            <h-section title="申请信息" collapse>
                <div>
                    <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                        <a-row :gutter="24">
                            <a-col :span="20">
                                <a-form-item label="标题" name="title">
                                    <span v-if="disabled">
                                        {{ form.title }}
                                    </span>
                                    <a-input v-model:value="form.title" placeholder="请输入标题" :maxlength="30" allow-clear v-else />
                                </a-form-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-item label="重要级别" name="level">
                                    <div style="width: 100%">
                                        <span v-if="disabled">
                                            {{ $filters.valToNameFilter('changeLevel', form.level) }}
                                        </span>
                                        <a-select placeholder="请选择" v-model:value="form.level" v-else>
                                            <a-select-option v-for="item of dicOptions.changeLevel" :key="item.code">
                                                {{ item.dimensionName }}
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-item label="变更类型" name="changeType">
                                    <div style="width: 100%">
                                        <span v-if="disabled">
                                            {{ $filters.valToNameFilter('changeType', form.changeType) }}
                                        </span>
                                        <a-select placeholder="请选择" v-model:value="form.changeType" @change="selectChange" v-else>
                                            <a-select-option v-for="item of dicOptions.changeType" :key="item.code">
                                                {{ item.dimensionName }}
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="变更内容描述">
                                    <span v-if="disabled">
                                        {{ form.changeDescription }}
                                    </span>
                                    <a-textarea placeholder="请输入变更描述" showCount :maxlength="300" auto-size v-model:value="form.changeDescription" v-else />
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="变更原因" name="changeReason">
                                    <span v-if="disabled">
                                        {{ form.changeReason }}
                                    </span>
                                    <a-textarea placeholder="请输入变更原因" showCount :maxlength="300" auto-size v-model:value="form.changeReason" v-else />
                                </a-form-item>
                            </a-col>
                            <a-col :span="7">
                                <a-form-item label="申请人">
                                    <span> {{ form.applyUser }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="7">
                                <a-form-item label="申请部门">
                                    <span>{{ form.applyUserDept }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="申请时间">
                                    <span>{{ $filters.dateFilter(form.createTime) }}</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </h-section>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs, computed, watch } from 'vue';
interface FormState {
    id: Nullable<number>;
    title: string; //名称
    level: Nullable<string>; // 重要级别
    changeType: Nullable<string>; //变更类型
    changeDescription: string; //原因
    changeReason: string; //类型
    applyUser: string; // 申请人
    applyUserDept: string; // 申请人部门
    createTime: string; // 申请时间
}
interface BaseInfoState {
    loading: boolean;
    form: FormState;
}
export default defineComponent({
    name: 'CreateRequireChange',
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    emits: ['detailChange'],
    setup(props, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<BaseInfoState>({
            loading: false,
            form: {
                id: null,
                title: '', //名称
                level: null, // 重要级别
                changeType: null, //变更类型
                changeDescription: '', //原因
                changeReason: '', //类型
                applyUser: '', // 申请人
                applyUserDept: '', // 申请人部门
                createTime: '' // 申请时间
            }
        });

        const rules = computed(() => {
            const rules = {
                level: [{ required: true, message: '重要级别不能为空', trigger: 'blur' }],
                changeType: [{ required: true, message: '变更类型不能为空', trigger: 'blur' }],
                changeReason: [{ required: true, message: '变更原因不能为空', trigger: 'blur' }]
            };
            return props.disabled ? {} : rules;
        });

        const selectChange = () => {
            emit('detailChange', {
                ...state.form
            });
        };
        const validate = () => {
            return new Promise((resolve) => {
                unref(ruleFormRef)
                    .validate()
                    .then(
                        () => {
                            resolve(true);
                        },
                        () => {
                            resolve(false);
                        }
                    );
            });
        };
        // 监听来自变更计划的修改
        watch(
            () => props.detail.changeType,
            (n: string) => {
                state.form.changeType = n;
            }
        );

        const init = () => {
            Object.keys(state.form).forEach((key) => {
                state.form[key] = props.detail[key];
            });
        };
        init();
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            selectChange,
            validate
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
    }
}
</style>